<template>
  <div class="contribu section-title">
    <div class="mescroll"  ref="mescroll">
      <p class="info-title">{{title}} 捐款记录</p>
      <div class="list">
        <div v-for="(item,index) in lists" class="item">
          <span class="name">{{item.nickname}}</span>
          <span class="phone">{{item.mobile}}</span>
          <span class="price">捐款<em>{{item.money}}</em>元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {contribulist} from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
  export default {
    components: {
    },
    data () {
      return {
        lists:[],
        title:'',
        mescroll: null, //mescroll实例对象
      }
    },
    created () {
      this.id=this.$route.query.welfare,
      this.month=this.$route.query.month
    },
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      upCallback (page) {      
        contribulist(this.id,this.month,page.num, page.size).then((res) => {
          console.log(res)
          this.title=res.data.msg
          if (page.num == 1){
            this.lists = []
          }
          if(res.data == null){
            console.log(1)
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data.list.length);
          })
          this.lists = this.lists.concat(res.data.data.list)
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.contribu
  background-color #fff
  padding 0 1.6rem
  margin-bottom 1rem
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    width calc(100% - 3rem)
    overflow-x hidden
    .top-img
      float left
    .search
      float left
      width 92%
      margin-left 4%
      text-align center
      background-color #fff
      height 4.5rem
      line-height 4.5rem
      margin-top -2.25rem
      margin-bottom 1rem
      img
        display inline-block
        vertical-align middle
        width 1.6rem
      span
        display inline-block
        vertical-align middle
        font-size 1.3rem
        color #172F6D
        margin-left .5rem
  .info-title
    padding-top 2.5rem
    padding-bottom .8rem
    font-size 1.8rem
    color #333
    font-weight bold
  .item
    display flex
    border-bottom 1px solid #e6e6e6
    &:last-child
      border none
    span
      flex 1
      font-size 1.5rem
      color #999
      line-height 5rem
    .name
      width 7rem
      max-width 7rem
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .phone
      flex 2
    .price
      flex 1.5
      text-align right
      em
        color #A81E27
</style>
